#cmpt_message {
  position: relative;
  height: 0;
  width: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;

  #cmpt_message_content {
    position: fixed;
    transform: translate(-50%, 0);
    left: 50%;
    top: -100px;
    padding: 1rem 2rem;
    background-color: skyblue;
    transition: all 0.375s ease-in-out;
  }

  &.active {
    pointer-events: all;
    opacity: 1;

    #cmpt_message_content {
      top: 3rem;
      color: red;
    }
  }
}